<template>
    <view :style="{height: height.allNavHeight+'px'}">
        <view class="nav">
            <view class="status-bar" :style="{height:height.statusBarHeight+'px'}"></view>
            <view class="nav-bar" :style="{height: height.navBarHeight +'px'}">
                <view class="nav-bar-left"  v-if="isBack" @tap="back">
                    <uni-icons type="left" color="#fff" size="20" />
                    <slot>返回</slot>
                </view>
                <view class="nav-bar-container"> {{title}}</view>
                <view class="nav-bar-right" v-if="isBack"></view>
            </view>
            <view class="tool-bar">
                <slot name="tool-bar"></slot>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        title:String,
    },
    computed:{
        height() {
            // navbar 高度计算规则： 状态栏 + 胶囊体 + 上下两个 6rpx + 下面渐变 116rpx;
            const { height: capsuleHeight,top } =   uni.getMenuButtonBoundingClientRect();
            const statusBarHeight = top;
            const navBarHeight = capsuleHeight + 6;
            const allNavHeight = statusBarHeight + navBarHeight + 58;
            return {statusBarHeight,navBarHeight,allNavHeight}
        },
        isBack(){
            return getCurrentPages().length >1;
        }
    },
    methods: {
        back(){
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss">
.nav {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: linear-gradient(to right,#03a391,#00c696);
    .nav-bar {
        padding: 0 10px;
        color: #fff;
        display: flex;
        align-items: center;
        .nav-bar-left,
        .nav-bar-right {
            width: 120px;
        }

        .nav-bar-container {
            flex: 1;
            text-align: center;
        }
    }
    .tool-bar {
        height: 58px;
    }
}
</style>

<!-- 116rpx; -->